<template>
  <div class="signBox">
    <div class="tips">
      <span>Signed in for </span> <span>{{ days }}</span>
      <span>consecutive days</span>
    </div>
    <p class="history"
       @click="goToHistory">View score history ></p>
    <ul class="signBtnBox">
      <li class="signBtnOne"
          v-for="(item, key, index) in list"
          :key="index">
        <div v-if="Number(days) == index + 1 || Number(days) > index + 1"
             style=" width: 100%; height: 100%; border-radius: 4px; background-color: #ff9400; ">
          <img src="./image/2.png" />
          <p>{{ item.gift_num }}</p>
        </div>
        <div v-else
             @click="signInToday">
          <img src="./image/3.png" />
          <p>{{ item.gift_num }}</p>
        </div>
      </li>
    </ul>
    <p class="signResetTime">Check-in reset time: daily 18:00:00</p>
    <div class="pointJump">
      <div class="pointShop"
           @click="gotoPointsStore">
        <P>Points</P>
        <p>Shop</p>
      </div>
      <div class="textCenter">
        <P>Task</P>
        <p>Center</p>
      </div>
      <div class="myWallet"
           @click="gotoWallet">
        <P>My</P>
        <p>Wallet</p>
      </div>
    </div>
  </div>
</template>
<script>
// import { assetsVersionDir } from "../../../hrefs";

export default {
  data () {
    return {
      list: [],
      res: "",
      /* 签到的总天数 */
      days: "",
      signOK: ""
    };
  },
  methods: {
    // 跳转到积分历史页面
    goToHistory () {
      // this.$openUrl(assetsVersionDir + "index.html?#/profile/wallet/points", 1);
    },
    // 打开积分商城页面
    gotoPointsStore () {
      this.$openUrl();
    },
    // 打开我的钱包页面
    gotoWallet () {
      // this.$openUrl(assetsVersionDir + "index.html?#/other/getPoints", 1);
    },
    todaySignIn () {
      this.$http.get(window.apis.sign_in_today).then((res) => {
        this.getSignIn();
        console.log(res);
        let signOK = res;
        this.signOK = signOK
        console.log(signOK);
      });
    },
    // 点击签到
    signInToday () {
      console.log(this.res.data.today);
      if (this.res.data.today == 0) {
        this.todaySignIn()
        console.log(this.res.code);
        if (this.res.code !== 0) {
          this.$message.success("签到失败");
        } else {
          this.$message.error("签到成功");
        }

      } else {
        this.$message.error("今日已签到");
      }
    },

    getSignIn () {
      this.$http.get(window.apis.check_in_query).then((res) => {
        // console.log(res);
        this.res = res;
        console.log(this.res);
        //传值发给list[]
        let list = res.data.conf;
        this.list = list;
        let days = this.res.data.days_num;
        this.days = days;
        console.log(days);
        console.log(this.res.data.today);
        // console.log(this.list);
      });
    },
  },
  // components: {},
  created () {
    this.getSignIn();
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.signBox {
  width: 398px;
  height: 276px;
  background: #2d3949;
  border-radius: 10px;
  padding: 1.4% 2.3%;
  margin: 0 auto;
  .tips {
    margin-top: 3%;
    span {
      color: #ffffff;
      font-size: 16px;
      font-family: PingFang SC;
      letter-spacing: -0.1px;
      line-height: 22px;
      font-weight: 500;
    }
    :nth-of-type(2) {
      color: #fe9300;
      letter-spacing: -0.1px;
    }
  }
  .history {
    opacity: 0.5;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 400;
    cursor: pointer;
    margin: 3% 0 6% 0;
  }
  .signBtnBox {
    display: flex;
    justify-content: space-between;
    & > li {
      cursor: pointer;
      width: 42px;
      height: 52px;
      background: #28313e;
      border-radius: 4px;
      img {
        margin: 6px 0 0 10px;
      }
      p {
        text-align: center;
        opacity: 0.6;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
    .signed {
      background: #ff9400;
      color: #ffffff;
      p {
        opacity: 1 !important;
      }
    }
  }
  .signResetTime {
    text-align: center;
    opacity: 0.5;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 400;
    margin: 3% 0;
  }
  .pointJump {
    display: flex;
    justify-content: space-between;
    .pointShop {
      width: 110px;
      height: 76px;
      background-image: url(./image/积分商城.png);
    }
    .textCenter {
      width: 110px;
      height: 76px;
      background-image: url(./image/任务中心.png);
    }
    .myWallet {
      width: 110px;
      height: 76px;
      background-image: url(./image/我的钱包.png);
    }
    .pointShop,
    .textCenter,
    .myWallet {
      padding: 20px 10px;
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      cursor: pointer;
      p {
        opacity: 0.9;
      }
    }
  }
}
</style>